<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <!-- fav icon -->
        <link rel="icon" href="../assets/images/fav-icon/fav-icon.png">
        
        <!-- bootstarp -->
        <link rel="stylesheet" href="../css/vendors/bootstrap.min.css">
        
        <!-- animate.css file -->
        <link rel="stylesheet" href="../css/vendors/animate.css">
        
        <!-- Fancybox -->
        <link rel="stylesheet" href="../css/vendors/jquery.fancybox.min.css">
        
        <!-- Swiper -->
        <link rel="stylesheet" href="../css/vendors/swiper.min.css">
        
        <!-- Splitting -->
        <link rel="stylesheet" href="../css/vendors/splitting.css">
        
        <!-- fontAwesome -->
        <link rel="stylesheet" href="../css/vendors/all.min.css">
        
        <!-- Font Family -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&amp;family=Nunito:wght@400;500;600;700;800;900&amp;display=swap">
        
        <!-- main-LTR-1 -->
        <link rel="stylesheet" href="../css/main-LTR-1.css">
    <title> About Us</title>
  </head>
  <body class="dark-theme overlay-is-linear-gradient rounded-btns ">
    <!--Start Page Header-->
    <header class="page-header menu-on-end" id="page-header">
      <!--start navbar-->
      <div class="container-fluid">
        <nav class="main-navbar " id="main-nav"><a class="navbar-brand " href="#"><img class="brand-logo light-logo img-fluid " src="../assets/images/logo/logo-light-wide.png" alt=""/><img class="brand-logo dark-logo img-fluid " src="../assets/images/logo/logo-dark-wide.png" alt=""/></a>
          <div class="menu-toggler-btn"><span></span><span></span><span></span></div>
          <div class=" navbar-menu-wraper  " id="navbar-menu-wraper">
            <ul class="navbar-nav  mobile-menu ">
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-home icon"></i>home<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1_dark.html"><i class="fas fa-home icon"></i>home-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2_dark.html"><i class="fas fa-home icon"></i>home-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-3_dark.html"><i class="fas fa-home icon"></i>home-3</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-4_dark.html"><i class="fas fa-home icon"></i>home-4</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-5_dark.html"><i class="fas fa-home icon"></i>home-5</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-6_dark.html"><i class="fas fa-home icon"></i>home-6</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-7_dark.html"><i class="fas fa-home icon"></i>home-7</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-8_dark.html"><i class="fas fa-home icon"></i>home-8</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-9_dark.html"><i class="fas fa-home icon"></i>home-9</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-10_dark.html"><i class="fas fa-home icon"></i>home-10</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-11_dark.html"><i class="fas fa-home icon"></i>home-11</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-12_dark.html"><i class="fas fa-home icon"></i>home-12</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-1-rtl_dark.html"><i class="fas fa-home icon"></i>home-1 RTL</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="home-2-rtl_dark.html"><i class="fas fa-home icon"></i>home-2 RTL</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="features_dark.html"><i class="fas fa-boxes icon"></i>services</a></li>
              <li class="nav-item"><a class="nav-link   active" href="about-us_dark.html"><i class="fas fa-address-card icon"></i>about us</a></li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-cogs icon"></i>portfolio<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-rounded-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio rounded </a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-with-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-squared-no-gabs_dark.html"><i class="fas fa-cog icon"></i>portfolio squared-2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-slider_dark.html"><i class="fas fa-cog icon"></i>portfolio slider</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="portfolio-single_dark.html"><i class="fas fa-list icon"></i>portfolio single</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-edit icon"></i>blog<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>blog home<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-1-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-2-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 2  </a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="blog-home-3-col_dark.html"><i class="fas fa-pencil-alt icon"></i>blog home 3  </a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-pencil-alt icon"></i>single post<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-image_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-slider_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="post-single-featured-video_dark.html"><i class="fas fa-pencil-alt icon"></i>single post 3</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-money-check icon"></i>pricing<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-1_dark.html"><i class="fas fa-money-check icon"></i>pricing page 1</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-2_dark.html"><i class="fas fa-money-check icon"></i>pricing page 2</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="pricing-3_dark.html"><i class="fas fa-money-check icon"></i>pricing page 3</a></li>
                </ul>
              </li>
              <li class="nav-item has-sub-menu"><a class="nav-link  " href="#0"><i class="fas fa-file-code icon"></i>pages<i class="fas fa-chevron-down down-Arrow-icon"> </i></a>
                <ul class="sub-menu ">
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="testimonials_dark.html"><i class="fas fa-comments icon"></i>testimonials</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="clients_dark.html"><i class="fas fa-users icon"></i>our clients</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="faq_dark.html"><i class="fas fa-question icon"></i>FAQ</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
                  <li class="nav-item sub-menu-item has-sub-menu"><a class="nav-link sub-menu-link " href="#0"><i class="fas fa-times icon"></i>404 pages<i class="fas fa-chevron-down down-Arrow-icon"></i></a>
                    <ul class="sub-menu">
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-1_dark.html"><i class="fas fa-times icon"></i>404-1</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-2_dark.html"><i class="fas fa-times icon"></i>404-2</a></li>
                      <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="404-3_dark.html"><i class="fas fa-times icon"></i>404-3</a></li>
                    </ul>
                  </li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-in_dark.html"><i class="fas fa-sign-in-alt icon"></i>sign in</a></li>
                  <li class="nav-item sub-menu-item"><a class="nav-link sub-menu-link  " href="sign-up_dark.html"><i class="fas fa-user-plus icon"></i>sign up</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link  " href="contact-us_dark.html"><i class="fas fa-mobile-alt icon"></i>contact us</a></li>
            </ul>
          </div><a class="header-cta  ma-btn-primary " href="#0">Subscribe</a>
        </nav>
      </div>
      <!--End navbar-->
    </header>
    <!--End Page Header-->
    <!-- Start inner Page hero-->
    <section class="d-flex align-items-center page-hero inner-page-hero " id="page-hero">
      <div class="overlay-photo-image-bg parallax"></div>
      <div class="overlay-color"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 hero-text-area">
            <h1 class="hero-title" data-splitting>about us</h1>
            <nav aria-label="breadcrumb ">
              <ul class="breadcrumb wow fadeInUp" data-wow-delay="1s">
                <li class="breadcrumb-item"><a class="breadcrumb-link" href="#0"><i class="fas fa-home icon "></i>home</a></li>
                <li class="breadcrumb-item active">about us</li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <!-- End inner Page hero-->
    <!-- Start  about Section-->
    <section class="about mega-section" id="about">
      <div class="circle-shape-top-start"></div>
      <div class="circle-shape-bottom-end"></div>
      <div class="pattern-top-end"></div>
      <div class="pattern-bottom-start"></div>
      <div class="container">
        <!-- Start first about div-->
        <div class="content-block ">
          <div class="row">
            <div class="col-12 col-lg-6 d-flex align-items-center about-col wow fadeInUp" data-wow-delay="0.2s">
              <div class="img-area  "><img class="img-fluid about-img " src="../assets/images/about/about-1_illustration.png" alt="Our vision"></div>
            </div>
            <div class="col-12 col-lg-6 d-flex align-items-center about-col wow fadeInUp" data-wow-delay="0.4s">
              <div class=" text-area "><span class="tag-line">our vision</span>
                <h3 class=" about-title ">we can making your dreams came true </h3>
                <p class="about-text ">
                  Lorem ipsum dolor, sit amet consectetur
                  adipisicing elit.
                  Distinctio,
                  aliquam est!
                  rerum inventore animi at iusto 
                </p>
                <p class="about-text ">
                  Lorem ipsum dolor, sit amet consectetur
                  adipisicing elit.
                  Distinctio,
                  aliquam est!
                  rerum inventore animi at iusto mollitia nemo reprehenderit dignissimos voluptate eos 
                  Repellendus tenetur officia excepturi dolorum totam sunt accusamus quia fugiat quasi
                  
                </p>
                <div class="about-stats stats-counter">
                  <div class="row  g-0 ">
                    <!--Info One-->
                    <div class="col-4 ">
                      <div class="stat-box  ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="10" data-to="750" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">projects</h5>
                      </div>
                    </div>
                    <!--Info Two-->
                    <div class="col-4 ">
                      <div class="stat-box ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="25" data-to="900" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">clients</h5>
                      </div>
                    </div>
                    <!--Info Three-->
                    <div class="col-4 ">
                      <div class="stat-box ">
                        <p class="stat-num "><span class="sign">+</span><span class="counter" data-from="0" data-to="980" data-speed="3000" data-refresh-interval="50"></span></p>
                        <h5 class="stat-desc">hours</h5>
                      </div>
                    </div>
                  </div>
                </div><a class=" ma-btn-primary " href="#0">Learn more</a>
              </div>
            </div>
          </div>
        </div>
        <!--End first about div-->
      </div>
    </section>
    <!-- End  about Section-->
    <!-- Start  our-clients Section-->
    <section class="our-clients   elf-section" id="our-clients">
      <div class="container">
        <div class="section-heading d-none ">
          <h4 class="section-title ">our great clients</h4>
          <p class="section-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line-gradient-color">       </div>
        </div>
        <div class=" clients-logos d-flex align-items-center justify-content-around flex-wrap">
          <!--Swiper-->
          <div class="swiper-container">
            <div class="swiper-wrapper clients-logo-wraper">
              <!-- every client logo is located inside div  with clss name "swiper-slide ".
              if you want to add more logos please keep the strcture of the swiper-slide as showen below
              
              
              -->
              <div class="swiper-slide">
                <div class="client-logo  wow fadeInUp" data-wow-delay="0.2s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/1-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.4s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/2-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.6s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/3-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="0.8s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/4-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/5-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1.2s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/6-white.png" alt=" "></a></div>
              </div>
              <div class="swiper-slide">
                <div class="client-logo wow fadeInUp" data-wow-delay="1.4s"><a href="#0"><img class="img-fluid logo " src="../assets/images/clients-logos/7-white.png" alt=" "></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  our-clients Section-->
    <!-- Start  about Section-->
    <section class="about " id="about">
      <div class="container-fluid px-0">
        <!-- Start Second about div-->
        <div class="content-block  wide-img-from-end-dir  ">
          <div class="row  g-0 ">
            <div class="col-12 col-lg-6 d-flex align-items-center order-0   order-lg-2 about-col wow fadeIn" data-wow-delay="0.4s">
              <div class="wide-img-area  show-video">
                <div class="overlay overlay-color"></div><img class=" video-thumb" src="../assets/images/about/about-photo-wide-1.jpg" alt="show case wide image">
                <div class="video-wraper">
                  <div class="play-btn-col-dir"><a class="video-link" href="#" role="button" data-fancybox="data-fancybox">
                      <div class="play-video-btn">
                        <div class="play-btn"> <img class="img-fluid play-icon" src="../assets/images/icons/play-icon.svg" alt=""/></div>
                        <div class="play-btn-text">watch our video</div>
                      </div></a></div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6   d-flex align-items-center about-col order-2 order-lg-0 wow fadeInUp" data-wow-delay="0.4s">
              <div class="text-area "><span class="tag-line">our mision</span>
                <h3 class=" about-title ">developing your way to success</h3>
                <div class="info-items">
                  <div class="row  g-0 ">
                    <div class="col-12 ">
                      <ul class="menu-items">
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-1.png" alt="showcase image" draggable="false">
                          <div class="info-content">
                            <h5 class="info-title">Creating a Uniq Experience</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A omnis inventore quod maxime officiis.</p>
                          </div>
                        </li>
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-2.png" alt="showcase image" draggable="false">
                          <div class="info-content">
                            <h5 class="info-title">Adding More Value</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, repellat. Corporis eveniet dolores eos architecto!</p>
                          </div>
                        </li>
                        <li class="info-item"><img class="info-img-icon" src="../assets/images/about/icon-3.png" alt="showcase image" draggable="false">
                          <div class="info-content"> 
                            <h5 class="info-title">Fulfill your dreams</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, ratione repellat architecto consectetur. </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div><a class=" ma-btn-primary " href="#0">Learn more</a>
              </div>
            </div>
          </div>
        </div>
        <!--End Second about div-->
        <!-- Start Second about div-->
        <div class="content-block  wide-img-from-end-dir  ">
          <div class="row  g-0 ">
            <div class="col-12 col-lg-6 d-flex align-items-center  about-col wow fadeIn" data-wow-delay="0.4s">
              <div class="wide-img-area  show-video">
                <div class="overlay overlay-color"></div><img class=" video-thumb" src="../assets/images/about/about-photo-wide-2.jpg" alt="show case wide image">
                <div class="video-wraper">
                  <div class="play-btn-col-dir"><a class="video-link" href="#" role="button" data-fancybox="data-fancybox">
                      <div class="play-video-btn">
                        <div class="play-btn"> <img class="img-fluid play-icon" src="../assets/images/icons/play-icon.svg" alt=""/></div>
                        <div class="play-btn-text">watch our video</div>
                      </div></a></div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6   d-flex align-items-center about-col  wow fadeInUp" data-wow-delay="0.4s">
              <div class="text-area "><span class="tag-line">our mision</span>
                <h3 class=" about-title ">developing your way to success</h3>
                <div class="info-items">
                  <div class="row  g-0 ">
                    <div class="col-12 ">
                      <ul class="menu-items">
                        <li class="info-item"><i class="far fa-chart-bar info-icon"></i>
                          <div class="info-content">
                            <h5 class="info-title">Creating a Uniq Experience</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A omnis inventore quod maxime officiis.</p>
                          </div>
                        </li>
                        <li class="info-item"><i class="far fa-paper-plane info-icon "></i>
                          <div class="info-content">
                            <h5 class="info-title">Adding More Value</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, repellat. Corporis eveniet dolores eos architecto!</p>
                          </div>
                        </li>
                        <li class="info-item"><i class="far fa-clone info-icon "></i>
                          <div class="info-content"> 
                            <h5 class="info-title">Fulfill your dreams</h5>
                            <p class="info-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, ratione repellat architecto consectetur. </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div><a class=" ma-btn-primary " href="#0">Learn more</a>
              </div>
            </div>
          </div>
        </div>
        <!--End Second about div-->
      </div>
    </section>
    <!-- End  about Section-->
    <!-- Start  our-team Section-->
    <section class="our-team mega-section d-flex align-items-center" id="our-team">
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">our team</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="row">
          <!--first Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.2s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/1.jpg" alt="Team Member 1">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name">ahmed Aly</h6><span class="tm-role">web developer</span>
              </div>
            </div>
          </div>
          <!--Second Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.4s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/2.jpg" alt="Team Member 2">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name ">fairouz amin</h6><span class="tm-role">web designer</span>
              </div>
            </div>
          </div>
          <!--Third Team Member-->
          <div class="col-12 col-md-8  col-lg-4 mx-md-auto ">
            <div class="tm-member-card   wow   fadeInUp" data-wow-delay="0.6s">
              <div class="tm-image ">
                <div class="overlay overlay-color"> </div><img class="img-fluid " src="../assets/images/our-team/3.jpg" alt="Team Member 3">
                <div class="tm-desc">
                  <div class="sc-wraper dir-row sc-size-40">
                    <ul class="sc-list">
                      <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                      <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                      <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                      <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="tm-details">
                <h6 class="tm-name">Allan Smith</h6><span class="tm-role">graphic designer</span>
              </div>
            </div>
          </div>
        </div>
        <!--Start teamsee-more-area-->
        <div class="see-more-area   wow fadeInUp" data-wow-delay="0.8s"><a class=" ma-btn-primary" href="#0">see all team members </a></div>
      </div>
    </section>
    <!-- End  our-team Section-->
    <!-- Start  faq Section-->
    <section class="faq mega-section  section-bg-shade" id="faq">
      <div class="shape-top-left"></div>
      <div class="shape-bottom-right"></div>
      <div class="pattern-top-end-dir"></div>
      <div class="pattern-bottom-start-dir"></div>
      <div class="container">
        <div class="section-heading center-heading">
          <h2 class="section-title wow" data-splitting="chars">frequently asked questions</h2>
          <p class="section-subtitle wow fadeInUp" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto cupiditate odio rerum est</p>
          <div class="line line-solid-main-color wow fadeIn" data-wow-delay="1s"></div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-5">
            <div class="faq-img start-dir-img-frame wow fadeInUp  " data-wow-delay="0.4s"><img class="img-fluid " src="../assets/images/faq/faq_photo.jpg" alt=""></div>
          </div>
          <div class="col-12 col-lg-7 ">
            <!--Start Accordion List For FAQ-->
            <div class="faq-accordion wow fadeInUp " id="accordion" data-wow-delay="0.7s">
              <!--first FAQ-->
              <div class="card mb-2">
                <div class="card-header " id="headingOne">
                  <h5 class="mb-0 faq-title">
                    <button class="btn btn-link  faq-btn " data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> are your service easy to use?</button>
                  </h5>
                </div>
                <div class="collapse show " id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordion">
                  <div class="card-body">
                    <p class="faq-answer">
                       Anim pariatur cliche reprehenderit, enim eiusmod high life
                      accusamus terry richardson ad squid. 3 wolf moon officia
                      aute,
                      eiusmod. Brunch 3 wolf moon tempor, iunt you probably
                      haven't
                      heard of them accusamus labore sustainable VHS.     
                      
                    </p>
                  </div>
                </div>
              </div>
              <!--second FAQ-->
              <div class="card mb-2">
                <div class="card-header " id="headingTwo">
                  <h5 class="mb-0 faq-title">
                    <button class="btn btn-link  faq-btn  collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> is this services work in my country?</button>
                  </h5>
                </div>
                <div class="collapse  " id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordion">
                  <div class="card-body">
                    <p class="faq-answer">
                       Anim pariatur cliche reprehenderit, enim eiusmod high life
                      accusamus terry richardson ad squid. 3 wolf moon officia
                      aute,
                      non cupidatat skateboard dolor brunch. Food truck quinoa
                      nesciunt
                      laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                      a
                      bird on it squid single-origin coffee nulla assumenda
                      shoreditch
                      et. Nihil anim keffiyeh helvetica, craft beer labore wes
                      anderson
                      cred nesciunt sapiente ea proident. Ad vegan excepteur
                      butcher
                      vice lomo. Leggings occaecat craft beer farm-to-table.     
                      
                    </p>
                  </div>
                </div>
              </div>
              <!--Third FAQ-->
              <div class="card mb-2">
                <div class="card-header " id="headingThree">
                  <h5 class="mb-0 faq-title">
                    <button class="btn btn-link  faq-btn  collapsed " data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> will i receive future updates?</button>
                  </h5>
                </div>
                <div class="collapse " id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordion">
                  <div class="card-body">
                    <p class="faq-answer">
                       Anim pariatur cliche reprehenderit, enim eiusmod high life
                      accusamus terry richardson ad squid. 3 wolf moon officia
                      aute,
                      non cupidatat skateboard dolor brunch. Food truck quinoa
                      nesciunt
                      laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                      a
                      bird on it squid single-origin coffee nulla assumenda
                      shoreditch
                      et. 
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  faq Section-->
    <!-- Start  take-action Section-->
    <section class="take-action mega-section " id="take-action">
      <div class="cta-wrapper">
        <div class="container">
          <div class="section-heading">
            <h2 class="section-title wow " data-splitting>subscribe to our newsletter</h2>
          </div>
          <div class="row  d-flex align-items-center wow fadeInUp  " data-wow-delay="0.4s">
            <div class="col-12 col-lg-8 mx-auto">
              <form class="email-capture-form">
                <input class="captured-email " id="captured-email" type="email" placeholder="Enter Your Email" required>
                <button class="  subscripe-btn " type="submit">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End  take-action Section-->
    <!-- Start  page-footer Section-->
    <footer class="page-footer dark-color-footer" id="page-footer">
      <div class="container">
        <div class="row footer-cols">
          <div class="col-12 col-md-8 col-lg-4  footer-col wow fadeInUp " data-wow-delay="0.3s">
            <h6 class=" footer-col-title  ">About yufa</h6>
            <div class="footer-col-content-wrapper">        
              <p class="footer-text-about-us ">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.Voluptatibus facere modi possimus dignissimos, 
                aliquam nobis eaque? Voluptatem magnam quisquam rem.
              </p>
              <div class="social-icons">
                <div class="sc-wraper dir-row sc-size-32">
                  <ul class="sc-list">
                    <li class="sc-item" title="Facebook"><a class="sc-link" href="#0"><i class="fab fa-facebook-f sc-icon"></i></a></li>
                    <li class="sc-item" title="youtube"><a class="sc-link" href="#0"><i class="fab fa-youtube sc-icon"></i></a></li>
                    <li class="sc-item" title="instagram"><a class="sc-link" href="#0"><i class="fab fa-instagram sc-icon"></i></a></li>
                    <li class="sc-item" title="X"><a class="sc-link" href="#0"><i class="fab fa-x-twitter sc-icon"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-2  footer-col wow fadeInUp " data-wow-delay="0.5s">
            <h6 class=" footer-col-title    ">useful links</h6>
            <div class="footer-col-content-wrapper">
              <ul class="footer-menu ">
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Google</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Dribbble</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">linkedIn</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">Wikipiddia</a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-2 footer-col wow fadeInUp " data-wow-delay=".7s">
            <h6 class=" footer-col-title    ">Resources</h6>
            <div class="footer-col-content-wrapper">
              <ul class="footer-menu">
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">support</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">dashboard</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">drivers</a></li>
                <li class="footer-menu-item"><a class="footer-menu-link" href="#0">projects</a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-8   col-lg-4 footer-col wow fadeInUp " data-wow-delay=".9s">
            <h6 class=" footer-col-title    ">contact information</h6>
            <div class="footer-col-content-wrapper">       
              <div class="contact-info-card"><i class="fas fa-envelope icon"></i><a class="text-lowercase  info" href="mailto:example@support.com">example@support.com</a></div>
              <div class="contact-info-card"><i class="fas fa-globe-africa icon"></i><a class="text-lowercase  info" href="#0">www.yoursite.com</a></div>
              <div class="contact-info-card"><i class="fas fa-map-marker-alt icon"></i><span class="text-lowercase  info">5 Xyz st., Abc, alexandria, egypt.</span></div>
              <div class="contact-info-card"><i class="fas fa-mobile-alt icon"></i><a class="info" href="tel:+20123456789">+20123456789      </a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyrights ">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-6">
              <p class="creadits">&copy; 2025 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
            </div>
            <div class="col-12 col-md-6">
              <div class="terms-links"><a href="#0">Terms of Use </a>
                | <a href="#0">Privacy Policy</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- End  page-footer Section-->
    <!-- Start loading-screen Component-->
    <div class="loading-screen" id="loading-screen">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <!-- End loading-screen Component-->
    <!-- Start back-to-top Component-->
    <div class="back-to-top" id="back-to-top"><i class="fas fa-arrow-up icon"></i></div>
    <!-- End back-to-top Component-->   
        
        <!--     JQuery     -->
        <script src="../js/vendors/jquery-3.4.1.min.js"></script>
        
        <!--     bootstrap     -->
        <script src="../js/vendors/bootstrap.bundle.min.js"></script>
        
        <!--     wow     -->
        <script src="../js/vendors/wow.min.js"></script>
        
        <!--     swiper     -->
        <script src="../js/vendors/swiper.min.js"></script>
        
        <!--     fancybox     -->
        <script src="../js/vendors/jquery.fancybox.min.js"></script>
        
        <!--     Splitting     -->
        <script src="../js/vendors/splitting.min.js"></script>
        
        <!--     countTo     -->
        <script src="../js/vendors/jquery.countTo.js"></script>
        
        <!--     main     -->
        <script src="../js/main.js"></script>
  </body>
</html>